<html>

<style>
    * {
        margin: 0;
    }

    #content {
        color: white;
        position: absolute;
        left: -20px;
        top: -10px;
        white-space: pre-wrap;
        height: 200px;
        overflow: auto;
    }
</style>

<script type="importmap">
	{
	  "imports": {
		"three": "../../three.js-r151/build/three.module.js",
		"three/addons/": "../../three.js-r151/examples/jsm/"
	  }
	}
</script>

<body>
    <div id="content">

    </div>
    <div id="canvas"></div>

    <script type="module">
        import * as THREE from 'three';
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

        // 1. 必须创建的三大件
        // 1.1 三维场景Scene, 类似创建了个世界，三维世界
        const scene = new THREE.Scene();
        const geometry = new THREE.BoxGeometry(1, 1, 1);
        const material = new THREE.MeshBasicMaterial({ color: 'yellow' });
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        const material1 = new THREE.MeshBasicMaterial({ color: 'yellow' });
        const cube1 = new THREE.Mesh(geometry, material1);
        cube1.position.set(0, 0, 2)
        scene.add(cube1);

        console.log("cube1", cube1.material.color);

        // 添加辅助坐标系
        const axesHelper = new THREE.AxesHelper(5);
        scene.add(axesHelper);

        // 1.2 相机
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(3, 3, 3)

        // 1.3 渲染器
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        let canvasDom = document.getElementById("canvas");
        canvasDom.appendChild(renderer.domElement);

        // 2. 设置相机控件轨道控制器OrbitControls
        new OrbitControls(camera, canvasDom);

        // 3. 射线相交拾取  
        // canvas监听不到click
        // renderer.domElement.addEventListener('click', function (event) {
        window.addEventListener('click', function (event) {
            console.log("click");
            // .offsetY、.offsetX以canvas画布左上角为坐标原点,单位px
            const px = event.offsetX;
            const py = event.offsetY;
            //屏幕坐标px、py转WebGL标准设备坐标x、y
            //width、height表示canvas画布宽高度
            const x = (px / window.innerWidth) * 2 - 1;
            const y = -(py / window.innerHeight) * 2 + 1;
            console.log("x, y", x, y);
            //创建一个射线投射器`Raycaster`
            const raycaster = new THREE.Raycaster();
            //.setFromCamera()计算射线投射器`Raycaster`的射线属性.ray
            // 形象点说就是在点击位置创建一条射线，射线穿过的模型代表选中
            raycaster.setFromCamera(new THREE.Vector2(x, y), camera);
            //.intersectObjects([mesh1, mesh2, mesh3])对参数中的网格模型对象进行射线交叉计算
            // 未选中对象返回空数组[],选中一个对象，数组1个元素，选中两个对象，数组两个元素
            const intersects = raycaster.intersectObjects([cube, cube1]);
            console.log("射线器返回的对象", intersects);
            // intersects.length大于0说明，说明选中了模型
            if (intersects.length > 0) {
                // 选中模型的第一个模型，设置为红色
                let color = intersects[0].object.material.color
                // color.set(0xff0000);

                // r: 1, g: 0, b: 0;  r: 1, g: 1, b: 0(green)
                if (color.g === 0) {
                    color.setRGB(1, 1, 0)
                } else {
                    color.setRGB(1, 0, 0)
                }
            }
        })


        function render() {
            renderer.render(scene, camera);
            requestAnimationFrame(render)
        }
        render();
    </script>
</body>

</html>